<template>
  <div class="wh100 flex flex-column flex-1">
    <el-table ref="tableBox" :data="tableData" height="100%" border>
      <el-table-column
        type="index"
        label="序号"
        width="50"
        align="center"
      />
      <template v-for="i in tableList">
        <el-table-column
          :key="i.value"
          :label="i.label"
          :prop="i.value"
          :min-width="i.width"
          show-overflow-tooltip
        />
      </template>
      <el-table-column width="250" fixed="right">
        <template slot="header">
          <span>操作</span>
        </template>
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            icon="el-icon-view"
            @click="$emit('detailBtn',scope.row)"
          >查看</el-button>
          <el-button
            v-if="scope.row.alarmType === 'ILLEGAL_ENTRY'"
            type="text"
            size="small"
            icon="el-icon-camera"
            @click="$emit('monitorBtn',scope.row)"
          >监控信息</el-button>
          <el-button
            v-if="
              scope.row.alarmStatus != 'CONFIRM' &&
                scope.row.alarmStatus != 'CANCEL' &&
                scope.row.alarmStatus != 'RESTORE' &&
                permission.confirm
            "
            type="text"
            size="small"
            icon="el-icon-check"
            @click="$emit('comfirmAlarm',{...scope.row,method:'CONFIRM'})"
          >确认告警</el-button>
          <el-button
            v-if="scope.row.isAlarm && permission.cancel"
            type="text"
            size="small"
            icon="el-icon-close"
            @click="$emit('comfirmAlarm',{...scope.row,method:'CANCEL'})"
          >取消告警</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="text-right mt-10"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      @size-change="sizeChange"
      @current-change="currentChange"
    />
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  export default {
    props: {
      tableData: {
        type: Array,
        default: () => []
      },
      currentPage: {
        type: Number,
        default: 1
      },
      pageSize: {
        type: Number,
        default: 10
      },
      total: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        tableList: [
          {
            label: 'BELONGS_REGION_NAME',
            value: 'regionTextNames',
            width: '160'
          },
          {
            label: 'STATION_NAME',
            value: 'stationTextName',
            width: '160'
          },
          {
            label: 'DEVICE_NAME',
            value: 'deviceName',
            width: '160'
          },
          {
            label: 'DEVICE_CODE',
            value: 'deviceId',
            width: '160'
          },
          {
            label: 'ALARM_LEVEL',
            value: 'alarmLevelText',
            width: '160'
          },
          {
            label: 'ALARM_STATUS',
            value: 'alarmStatusText',
            width: '160'
          },
          {
            label: 'ALARM_TYPE',
            value: 'alarmTypeText',
            width: '150'
          },
          {
            label: 'ALARM_DESCRIPTION',
            value: 'description',
            width: '200'
          },
          {
            label: 'TRIGGER',
            value: 'trigger',
            width: '200'
          },
          {
            label: 'START_TIME',
            value: 'startTime',
            width: '150'
          },
          {
            label: 'CONFIRM_REASON',
            value: 'confirmDesc',
            width: '250'
          },
          {
            label: 'CONFIRM_TIME',
            value: 'confirmTime',
            width: '150'
          },
          {
            label: 'CONFIRMER',
            value: 'confirmer',
            width: '150'
          }
        ]
      }
    },
    computed: {
      permission() {
        return {
          cancel: true,
          confirm: true
        }
      }
    },
    created() {

    },
    methods: {
      sizeChange(size) {
        this.$emit('update:pageSize', size)
        this.$emit('loadData')
      },
      currentChange(page) {
        this.$emit('update:currentPage', page)
        this.$emit('loadData')
      }
    }

  }

</script>
<style lang='scss' scoped>

</style>
